<script setup lang="ts">
  import { ref } from "vue"
  import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
  const permissionStore = usePermissionStore();
  import { useRouter } from 'vue-router'
  import { createMessage } from "@/Public-UIlibrary/pb-message/method";
  console.log(permissionStore.pinia_menuList, '权限');
  const router = useRouter()
  let flag = false
  const props = defineProps({
    title: {
      type: String,
      default: '标题'
    },
    path: {
      type: String,
      default: ''
    }
  })
  // 判断权限
  const hasPermission = (path, PermissionList) => {
    for (let key = 0; key < PermissionList.length; key++) {
      if (PermissionList[key].path == path) {
        console.log(888);
        flag = true
        break
      } else {
        if (PermissionList[key].children && PermissionList[key].children.length > 0) {
          hasPermission(path, PermissionList[key].children)
        }
      }
    }
  }
  const toPath = () => {
    hasPermission(props.path, permissionStore.pinia_menuList)
    if (flag) {
      router.push({ path: props.path });
    } else {
      createMessage({
        message: '没有权限',
        type: 'error'
      })
    }
  }
</script>

<template>
  <div class="flex justify-between">
    <div class="title flex" style="align-items: center;">{{title}}
      <slot name="icon"></slot>
    </div>
    <div class="view" @click="toPath()">查看
      <pb-icon name="arrow-right" size="12"></pb-icon>
    </div>
  </div>
  <slot>

  </slot>

</template>

<style lang="scss" scoped>
  .title {
    font-weight: 600;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-family: PingFang SC, PingFang SC;
    /* margin-right: 8px; */
    /* margin-bottom: 12px; */
  }

  .view {
    display: flex;
    align-items: center;
    color: var(--pb-color-light-7);
    cursor: pointer;
  }

  .view:hover {
    color: var(--pb-color-light-1);
  }
</style>